@charset "UTF-8";
/*重新设置外部引用的一些样式，element*/

/***
vue
***/
[v-cloak] {  display: none; }

/***
element
***/

//loding图标
.lz-loading{ width: 100%; height: 100%;}
.el-loading-spinner{
  .circular{ margin:auto;}
  .path{stroke:$primary !important;}
  .el-loading-text{ color:$primary !important;}
}
.tag-box .el-tag + .el-tag {  margin-left: 10px; }

//input
.el-input__suffix{line-height: 36px; width: 30px; text-align: center; right: 0; color:$borderColor;
  &:hover{color: darken($borderColor, 10%)}
}
.el-input__inner{ height: 36px;}
.el-input__inner, .el-textarea__inner{ border-color:$borderColor; color:$darkGray;
  &:focus { border-color: $primary; box-shadow: 0 0 0 3px rgba($primary, .15);}

  &::-webkit-input-placeholder{color:$borderColor }
  &::-moz-placeholder{color:$borderColor; }
  &::-moz-placeholder{color:$borderColor; }
}
.el-input:not(.is-disabled) .el-input__inner, .el-textarea:not(.is-disabled) .el-textarea__inner{
  &:hover{ border-color: $primary; }
}
.el-form-item{
  .el-form-item__label, .el-form-item__content{ line-height: 36px; color:$black;}
  &.is-success{
    .el-input__inner, .el-textarea__inner{ border-color: $borderColor;}
    .el-input__inner:focus, .el-textarea__inner:focus{ border-color: $primary;}
  }
  &.is-required{}
  &.is-error{
    .el-input__inner, .el-textarea__inner{border-color: $red; box-shadow: 0 0 0 3px rgba($red, .15);}
  }
}
.el-form--label-top .el-form-item .el-form-item__label{ line-height: 18px;}

//Select 选择器
.el-select{
  .el-input__suffix{ right: 0;}
  .el-input{
    .el-input__icon{ width: 30px; color:$darkGray; font-size: 12px;  }
    .el-input__inner{ padding-right: 30px;
      &:hover{ border-color: $borderColor; }
      &:focus { border-color: $borderColor; box-shadow:0 0 0 0 #fff;}
    }
  }
  .el-tag--primary{ background-color: rgba($primary,.05); border-color: rgba($primary,.2); color: $primary;
    .el-icon-close:hover{background-color: $primary;}
  }
}
.el-select-dropdown, .el-select-dropdown.is-multiple{ margin-top: -1px !important; border-color: $borderColor !important; box-shadow: 0px 2px 4px rgba(0,0,0,.05) !important;
  .el-select-dropdown__item{
    &.selected {  color: $primary;  background-color: #fff; font-weight: normal;
      &.hover{background-color: #f0f4f7;}
      &:after{top:10px;}
    }
    &.hover{background-color: #f0f4f7;}
  }
  .popper__arrow{display: none;}
}

.time-select-item.selected:not(.disabled){ color:$primary; font-weight: normal;}

//表单
.lz-checkbox, .el-checkbox{
  .el-checkbox__input{
    .el-checkbox__inner{ width: 20px; height: 20px; border-radius: 4px; border-color: $borderColor; box-shadow: 0 1px 4px rgba($borderColor, .6) inset; }
    &:not(.is-disabled) .el-checkbox__inner:hover{ border-color: $primary; box-shadow: 0 0 0 3px rgba($primary, .15);}
    .el-checkbox__inner::after{border-color:$primary; border-width: 1px; left:5px; width: 5px; height: 10px;}
    &.is-checked .el-checkbox__inner {  background-color: #fff;  border-color: $borderColor;  }
    &.is-focus .el-checkbox__inner { border-color: $borderColor;  }
    &.is-disabled{
      &.is-checked .el-checkbox__inner::after {  border-color: $borderColor;  }
      .el-checkbox__inner{ background-color: $bodyBg; border-color: $borderColor; }
    }
    &.is-checked+.el-checkbox__label{ color:$black;}
  }

}
.lz-radio, .el-radio{
  .el-radio__inner:after{ position: absolute; width: 4px;  height: 8px; border: 1px solid $primary;  border-left: 0;  border-top: 0; border-radius: 0; display: none;}
  .el-radio__inner{ width: 20px; height: 20px; border-color: $borderColor; box-shadow: 0 2px 3px rgba($borderColor, .4) inset;
    &:hover{ border-color: $primary; box-shadow: 0 0 0 3px rgba($primary, .15);}
  }
  .el-radio__input{
    &.is-checked .el-radio__inner {  background-color: #fff;  border-color: $borderColor;
      &:after{ display: block; transform: translate(-50%, -50%) rotate(45deg); margin-top: -1px;}
    }
    &.is-checked + .el-radio__label{color:inherit;}
    &.is-focus .el-radio__inner { border-color: $borderColor;  }
  }

  &.el-radio{ margin-left: 0; margin-right: 10px;}
}

//按钮
.el-button--text{color: $primary !important;
  &:hover{ text-decoration: underline;}
  &:active{ color:darken($primary, 10%) !important; text-decoration:none;}
}

.el-button--default{ width: 136px; border-color: $primary; color:$primary;
  &:focus{border-color: $primary; color:$primary; background-color:#fff;}
  &:hover{ border-color: lighten($primary, 10%); color:lighten($primary, 10%); background-color:#fff;}
  &:active{ border-color: darken($primary, 10%); color:darken($primary, 10%); background-color:#fff;}
}
.el-button--primary{ width: 136px; border-color: $primary; background-color:$primary; color:#fff;
  &:focus{border-color: $primary; background-color:$primary; color:#fff;}
  &:hover{ border-color: lighten($primary, 10%); background-color:lighten($primary, 10%); color:#fff;}
  &:active{ border-color: darken($primary, 10%); background-color:darken($primary, 10%); color:#fff;}
}
.btn-group{ @include clearfix; display: inline-block; vertical-align: middle;
  .lz-btn{float:left; width: auto; font-size: 12px; padding: 9px 20px;
    & + .lz-btn{ margin-left: 0;}
    &:not(:first-child):not(:last-child){border-radius: 0;}
    &:first-child{ border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none;}
    &:last-child{ border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none;}
  }
}


//步骤
.lz-steps{
  .el-step.is-horizontal{
    //top:10px; height: 1px; right: 15px; left: 100px; background-color: $lightBlue;
    .el-step__icon{ width: 20px; height: 20px; line-height: 20px; border:none; color:#fff;}
    .el-step__icon-inner{ font-weight: 400;}
    .el-step__title{ position: absolute; top:0; left:30px;  font-weight: normal; line-height: 20px; font-size: 14px;
      &.is-success, &.is-process{font-weight: normal; color: $primary;}
    }
    .el-step__line{ height: 1px; top:10px; left:100px; right:10px;}
    .el-step__head{
      &.is-success{
        .el-step__icon{ background-color: $primary;}
        .el-step__line{ background-color: $primary;}
      }
      &.is-process{
        .el-step__icon{ background-color: $primary;}
        .el-step__line{ background-color: $lightBlue;}
      }
      &.is-wait{
        .el-step__icon{ background-color: $borderColor;}
        .el-step__line{ background-color: $lightBlue;}
      }
    }
  }
  //.el-step__line-inner{display: none;}
}

//标签
.lz-tag{ border: none; border-radius: 15px; padding: 0 10px; font-size: 14px; height: 20px; line-height: 20px;
  & + .lz-tag{margin-left: 10px;}
  &.tag-primary{ color: #6ac992; background-color: #dffbfd;}
  &.tag-green{ color: $primary; background-color: #e5fddf;}
  &.tag-gray{ color: $gray; background-color: lighten($light, 2%);}
}

//对话框
.lz-dialog{
  .el-dialog{@include center; width: 540px; overflow: hidden; margin-top: 0 !important;}
  .el-dialog__header{ position: relative;  padding: 20px;background-color: #fff; box-shadow: 0 6px 10px rgba(#e4efee, .75); z-index: z("modal", "header");
    .title, .el-dialog__title{ font-size: 18px; color: lighten($black,10%); font-weight: normal;}
    .actions{ position: absolute; right: 20px; top:20px; line-height: 1;
      .icon-baocun{ font-size: 24px;}
    }
  }
  .el-dialog__body{color: $black;}
  .el-dialog__footer{ text-align: center; padding: 20px 20px 50px;}
  &.lz-message{
    .el-dialog__body{ padding: 60px 20px; font-size: 16px; text-align: center;}
  }
}

//提示框
.el-message-box{ width: 450px; }
.el-message-box__header{ padding: 25px 20px; background-color: #fff; box-shadow: 0 6px 10px rgba(#e4efee, .75);}
.el-message-box__headerbtn{ top:14px; right: 14px; font-size: 30px;
  .el-message-box__close{ color:$lightBlue; }
  &:focus .el-message-box__close{ color: $lightBlue; }
  &:hover .el-message-box__close{ color: lighten($primary, 10%); }
  &:active .el-message-box__close{ color: darken($primary, 10%); }
}
.el-message-box__message{ padding: 60px 20px; text-align: center; font-size: 16px;}
.el-message-box__btns{ text-align: center; padding-bottom: 60px;
  .el-button{ padding: 12px 20px;}
  button:nth-child(2) {  margin-left: 20px; }
}

.el-message--success{ background-color:#fff; border-color:rgba($primary, .1);
  .el-message__content, .el-icon-success{color:$primary;}
}



//分页
.lz-pagination{ padding: 40px 60px; text-align: right; font-weight: normal;
  span{ height: 36px !important; line-height: 36px !important;}
  .el-select .el-input .el-input__inner{ height: 36px; font-size: 16px;}
  .el-pagination__total{ font-size: 18px !important; margin-right: 20px;}
  .el-pagination__sizes{ margin-right: 20px;}
  .btn-next, .btn-prev{ position: relative; top:-4px; border: none !important; width: 44px; height: 44px;
    .el-icon{ font-size: 16px;}
    &:not('.disbled'):hover{color: $primary;}
  }
  .el-pager{ position: relative; top:-4px;
    li{ width: 44px; height: 44px; line-height: 44px !important; font-size: 18px; border: none !important;
      &:hover{color: $primary;}
      &.active{ position:relative; z-index:2; background-color: #fff; color: $primary; box-shadow: 0 0 8px rgba(#e4efee, .9); border-radius: 4px;}
    }
  }
}

//表格
.el-table{ border: none !important;
  &:before, &:after{display: none;}
  th{background-color: #f7f9fa; border-color: $lineColor; font-weight: normal; height: 50px; color:$black; padding: 0;}
  td{ border-color: $lineColor  !important; color:$darkGray; height: 50px !important;}
  .el-table__header thead div{background-color: #f7f9fa;}
  .el-table__row:hover td{background-color:$grayBg !important;}
}

//popover提示框
.lz-popover{ padding: 20px !important; border-color: $primary !important; box-shadow: none !important;
  .title{ font-size: 16px; margin-bottom: 10px;}
}



/***
公共组件
***/
/*公共样式*/
.page{}

.img-box{ width: 60px; height: 60px; background-color: $grayBg; overflow: hidden; border-radius: 100%;
  img{ width: 100%; height: 100%;}
}
//.container{width: 1000px; margin: 0 auto; padding: 0 15px; box-sizing: border-box;}
//@media(min-width: 1200px){
//  .container{width: 1170px;}
//}

//空页面
.empty-page{ margin: 0 auto; padding: 120px 0;
  .empty-img{ display: block; margin-left: 100px; margin-bottom:50px;}
  .empty-title{ font-size: 22px;}
  .empty-desc{ line-height: 24px;
    dd{ color: $darkGray; margin-left: 2em;}
  }
  .empty-guide{ margin-top: 50px;
    .guide-btn{ position: relative; display: inline-block; line-height: 50px; padding: 0 20px; background-color: #e6edf1; margin-right: 20px; border-radius: 4px;
        &:before{position: absolute; top:50%; right: -15px; @include triangle(right, 4px, $primary); transform: translateY(-50%); border-left-width: 6px; }
        &:last-child{
          &:before{ display: none;}
        }
    }
  }
}

//面板
.panel{background-color: #fff; border-radius: 4px; box-shadow: 0 0 10px rgba(darken($primary, 20%), .1);
  .panel-head{ padding: 20px; border-bottom: 1px solid $borderColor; line-height: 1;}
  .panel-title{ font-size: 18px;}
  .panel-body{ padding: 20px;}
}
//页面区域
.page-section{ margin-bottom: 30px;
  .section-title{ margin-bottom: 15px;
    .name{ font-size: 16px; font-weight: bold; margin-right: 20px;}
  }
}
//设置列表
.set-list{
  li{@include clearfix; line-height: 54px; border-bottom: 1px solid $lineColor;}
}
//公共图标
.public-tishi{display:inline-block; width: 20px; height: 20px; background-color: $primary; line-height: 20px; text-align: center; border-radius: 100%; color:#fff; font-size: 14px; font-family: Helvetica, Arial; cursor: pointer; box-shadow: 0 3px 10px rgba($primary, .6);}
.public-xiaolian, .public-kulian{ width: 24px; height: 24px; vertical-align: middle; margin-right: 10px;}
.public-xiaolian{ background-position: -80px 0;}
.public-kulian{ background-position: -110px 0;}
.public-chakan{ width: 20px; height: 15px; background-position: -180px 0;
  &:hover{background-position: -210px 0}
}

/*开发者中心*/
.developer-page{ position: absolute; top:0; left: 0; bottom: 0; right: 0; background-color: $bodyBg;
  .page-header{
    .header{ @include clearfix; width: auto; height: 36px; line-height: 36px; background-color: #0e202e; font-size:12px; color: #74828b; padding: 0 20px;
      a{color:#74828b;
        &:hover{ color:#fff;}
      }
      .header-left{ float: left;}
      .account-label{ float: right;
        .mark + .mark{ margin-left: 10px;}
        .mark{ font-size: 12px; line-height: 1; border-radius: 4px; padding:2px 5px; }
        .qiye{ background-color: rgba($blue, .2); color: $blue;}
        .geren{ background-color: rgba($green, .2); color: $green;}
        .weirz{ background-color: rgba(#74828b, .2); color: #74828b;}
        .yirz{ background-color: rgba(#ffe63c, .2); color: #ffe63c;}
      }
    }
    .navbar{ @include clearfix; width: auto; height: 56px; background-color: #162934;
      .menu{ float: left;
        .menu-btn{ width: 56px; height: 56px;  background: url('../../images/navbar-menu.png') no-repeat; cursor: pointer;}
        .menu-list{ position: absolute; top:92px; left: 0; bottom: 0; display: none; width: 180px; background-color: #fff; box-shadow: 0px 0px 10px rgba(#000,.02); z-index: z("modal", "base"); padding: 10px;
          li{ line-height: 36px; font-size: 16px;}
        }
        &:hover{
          .menu-btn{ background-color: $primary;}
          .menu-list{ display: block}
        }
      }
      .logo{ float:left; height: 22px; margin: 17px 15px;}
      .name{ float: left; margin-right: 20px; font-size: 18px; color:#fff; line-height: 56px;}
      .navbar-nav{
        li{ float:left; margin: 0 15px; height: 56px; line-height: 56px; box-sizing: border-box;
          a{display: block; color: #d7dadc; font-size: 16px;  }
          &.active, &:hover{ border-bottom: 2px solid $primary;
            a{ color:$primary; }
          }
        }
      }
      /*头像下拉*/
      .header-avatar{ float:right; position: relative; margin-right: 20px; z-index: z("default") + 9;
        .dropdown-btn{ display: block; padding: 10px;
          .avatar{ display: block; width: 36px; height: 36px; border-radius: 100%; box-sizing: border-box;}
        }
        .dropdown-con{ position: absolute; top:56px; right: 0; display: none; min-width: 140px; font-size: 16px; background-color:#fff; padding: 20px 25px; box-shadow: 0px 0px 10px rgba(#000,.1);
          &:before{ position: absolute; top:-6px; right: 22px; @include triangle(top, 6px, #fff)}
          .dropdown-header{ margin-bottom:10px;}
          .dropdown-list li{
            a{ color:#74828b; line-height: 30px;
              &:hover{color:$primary;}
            }
          }
        }
        &:hover{
          .avatar{ border:1px solid $green;}
          .dropdown-con{ display: block}
        }
      }
    }
  }
  .page-container{position: absolute; top: 92px; bottom: 0; left:0; right: 0;}
  .page-sidebar{position: absolute; top:0; left:0; bottom: 0; width:176px; box-shadow: 0px 0px 5px rgba(#000,.02); background-color: #fff;}
  .page-sidebar-menu{
    & > .nav-item{
      & > .nav-link{ display: block; position: relative; padding: 15px 15px 15px 50px; font-size: 18px;
        & > .iconfont{ position: absolute; left:20px; top:15px; font-size: 18px;}
      }
      &.current{
        & > .nav-link{ color:$primary;}
      }
      &.active{
        & > .nav-link{ background-color: $bodyBg; width: 180px; color:$primary;}
      }
    }
    .sub-menu{
      .nav-item{
        .nav-link{ display: block; padding: 10px 15px 10px 50px;}
        &.active{
          .nav-link{ background-color: $bodyBg; width: 180px; color:$primary;}
        }
      }
    }
  }
  .page-body{ position: absolute; top:30px; left:200px; bottom:30px; right: 24px;
    .el-breadcrumb{font-size: 16px;
      .el-breadcrumb__item__inner{color:darken($gray,10%);
        &:hover{color: $primary;}
      }
      .el-breadcrumb__item:last-child .el-breadcrumb__item__inner{ color:black;}
      .el-breadcrumb__separator{ margin: 0 10px; font-family:'宋体'; font-size: 14px; color:darken($gray,10%); }
    }
    .page-box{ position: absolute !important; top:36px; bottom: 0; left: 0; right: 0; width: auto; background-color: #fff; border-radius: 5px; box-shadow: 0px 4px 10px rgba(darken($primary, 20%),.05);
      .page-con{ position: relative; width:100%; height: 100%; box-sizing: border-box;
        .page-scroll{ position: absolute; top:0; bottom: 0; left: 0; right: 0;}
        .el-breadcrumb{ padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid $lineColor;}
      }
    }
  }
  //子导航栏
  .submenu-bar{ width: auto; height: 67px; line-height: 67px; box-shadow: 0 4px 10px rgba(#e4efee, .65); padding: 0 20px;
    .submenu{
      li{ position: relative; float: left; padding: 0 15px; font-size: 18px;
        &.active{ color:$primary;
          &:before{position:absolute; bottom:0; left:0; right:0; content: ''; height: 2px; background-color: $primary;}
        }
        .public-tishi{ position: absolute; right: -20px; top:50%; margin-top: -10px;}
      }
    }
  }
  //列表工具栏
  .list-toolbar{ @include clearfix;
    .search-box{ float:right;
      .el-select{width: 90px;
        .el-input{font-size: 16px;}
      }
      .search-input{ width: 380px; }
      .lz-btn{ width: auto; padding: 9px 16px;}
    }
  }
}
//图片选中后覆盖
.checked-cover{@include cover; background-color: rgba($black, .6);
  .checked{@include center; width: 24px; height: 24px; background-color: $primary; border-radius: 100%; box-shadow: 0 3px 10px rgba($black, .3);
    &:after{position: absolute; top:5px; left:3px;  content: ''; width: 15px; height: 8px; border:2px solid #fff; border-top:none; border-right: none; transform: rotate(-45deg);}
  }
}
//上传
.upload{
  .file{ display: none;}
}

/*画廊 图片弹框*/
.gallery-wrapper{ position: fixed; top: 0;  right: 0;  bottom: 0;  left: 0;  background-color: lighten($black,10%); z-index: z("modal", "base"); color:#fff;
  .gallery-body{ position:relative;
    .big-img{ overflow:hidden;
      img{@include center; max-width: 100%; max-height: 100%;}
    }
    .close{ position: absolute; top:20px; right: 20px; color: lighten($gray,10%); font-size: 36px;
      &:hover{ color: lighten($gray,20%); }
    }
    .prev, .next{ position: absolute; top:50%; transform: translateY(-50%); width: 50px; height: 100px; background-color: darken($black, 10%); color:#fff; border-radius: 4px;
      i{@include center; font-size: 32px;}
      &:hover{background-color: lighten($black, 20%); color:#fff;}
    }
    .prev{ left:75px;}
    .next{ right: 75px;}
  }
  .gallery-title{ text-align: center; padding: 0px 20px 10px;}
  .gallery-footer{ background-color: $black; padding: 10px 0;}
  .gallery-actions{ text-align: center; padding: 0px 20px 10px;
    .action{ font-size: 25px; margin: 0 10px; color:#fff;
      &:hover{  color:darken(#fff,10%);}
    }
  }
  .gallery-thum-box{position: relative;}
  .gallery-thum{
    li{float:left; width:(100% / 11); padding: 0 4px; box-sizing: border-box;
      .small-img{ display: block; position: relative; width: 100%; padding-bottom: 56%; overflow: hidden;
        .img-box{display: block; position: absolute; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box;background-color: lighten($black, 10%); }
        img{@include center; width: 100%; min-height: 100%; transition-duration: 400ms;}
      }
      &:hover .img-box, &.current .img-box{ cursor: pointer; border:2px solid $blue; }
    }
  }
}
.gallery-wrapper.multi{ @extend .lz-flex-col;
  .gallery-body{@extend .flex1;
    .big-img{position: absolute; top:20px; bottom: 10px; left:20px; right: 20px;}
  }
}
.gallery-wrapper.single{
  .gallery-body{ position: absolute; top:0; bottom: 0; left:0; right: 0;
    .big-img{ width: 100%; height: 100%;}
  }
}

/*虚拟滚动条*/
.vue-scrollbar-transition, .vue-scrollbar__scrollbar-vertical, .vue-scrollbar__scrollbar-horizontal {  transition: all 0.5s ease;  -moz-transition: all 0.5s ease;  -webkit-transition: all 0.5s ease;  -o-transition: all 0.5s ease;
}
.vue-scrollbar__wrapper { overflow: hidden;  position: relative;
  &:hover .vue-scrollbar__scrollbar-vertical, &:hover .vue-scrollbar__scrollbar-horizontal {  opacity: 1; }
  .vue-scrollbar__scrollbar-vertical, .vue-scrollbar__scrollbar-horizontal {  opacity: 0.5;  position: absolute;  background: transparent; z-index: 9;
    &:hover {  background: rgba(0, 0, 0, 0.2); }
    .scrollbar{ position: relative;  background: rgba(0, 0, 0, 0.5);  cursor: default; border-radius: 4px;}
  }
  .vue-scrollbar__scrollbar-vertical {  width: 4px;  height: 100%;  top: 0;  right: 0;
    .scrollbar {  width: 4px;  }
  }
  .vue-scrollbar__scrollbar-horizontal { width: 100%; height: 4px; bottom: 0; right: 0;
    .scrollbar {  height: 4px; }
  }
}